<template>
  <page-header-wrapper>
    
    <a-card v-if='!showUpdate'>
      <div class='table-page-search-wrapper'>
        <a-form layout='inline'>
          <a-row :gutter='48'>
            <a-col :md='8' :sm='24'>
              <a-form-item label='题目名称'>
                <a-input v-model='queryParam.title' placeholder='请输入操作名称或关键字' />
              </a-form-item>
            </a-col>
            <a-col :md='8' :sm='24'>
              <a-form-item label='题目难度'>
                <a-select v-model='queryParam.level' placeholder='请选择题目难度'>
                  <a-select-option value='0'>简单</a-select-option>
                  <a-select-option value='1'>中等</a-select-option>
                  <a-select-option value='2'>困难</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md='8' :sm='24'>
              <a-button type='primary' @click='query()'>查询</a-button>
              <a-button style='margin-left: 8px' @click='() => {this.queryParam = {};getAuthorTopicList()}'>重置
              </a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      
      <!--页签-->
      
      <a-tabs type='card' @change='changeTableIndex'>
        <a-tab-pane :key='1' tab='我设置的题目'>
          <a-table :columns='columns'
                   bordered
                   rowKey='topicId'
                   :loading='loading'
                   :pagination='pagination'
                   :data-source='data'
                   @change='handleTableChange'
                   class='question-list'>
            <!--题目序号-->
            <span
              slot='order'
              slot-scope='order'>
        <a-tag color='geekblue'>
          {{ order }}
        </a-tag>
      </span>
            <span
              slot='topicId'
              @click='copy(topicId)'
              slot-scope='topicId'>
        <a-tag style='cursor: pointer'>
         {{ topicId }}
        </a-tag>
      </span>
            <!--难度-->
            <span
              slot='level'
              slot-scope='level'>
        <a-tag
          :color='getTagColor(level)'>
          {{ level === '0' ? '简单' : level === '1' ? '中等' : level === '2' ? '困难' : '未知难度' }}
        </a-tag>
      </span>
            <!--标签-->
            <span
              slot='tags'
              slot-scope='tags'>
          <a-space>
            <a-button size='small' v-for='tag in tags' :key='tag'>
              {{ tag }}
            </a-button>
          </a-space>
        </span>
            
            <span
              slot='action'
              slot-scope='text, record'>
         
         <a-button
           style='border-radius: 10px'
           type='primary'
           @click='goToUpdateTopic(text,record)'>
          修改题目
        </a-button>
        
           <a-popconfirm
             title='确认删除'
             ok-text='确认'
             cancel-text='取消'
             @confirm='delTopic(text,record)'
             @cancel='() => {}'
           >
        <a-button
          style='border-radius: 10px;margin-left: 10px;'>
          删除题目
        </a-button>
  </a-popconfirm>

      </span>
          
          </a-table>
        </a-tab-pane>
        <a-tab-pane :key='2' tab='题目回收站'>
          <a-table :columns='columns'
                   bordered
                   rowKey='topicId'
                   :loading='loading'
                   :pagination='pagination'
                   :data-source='recycleBin'
                   @change='handleTableChange'
                   class='question-list'>
            <!--题目序号-->
            <div
              slot='order'
              slot-scope='order'>
              <a-tag color='geekblue'>
                {{ order }}
              </a-tag>
            </div>
            <div
              slot='topicId'
              @click='copy(topicId)'
              slot-scope='topicId'>
              <a-tag style='cursor: pointer'>
                {{ topicId }}
              </a-tag>
            </div>
            <!--难度-->
            <div
              slot='level'
              slot-scope='level'>
              <a-tag
                :color='getTagColor(level)'>
                {{ level === '0' ? '简单' : level === '1' ? '中等' : level === '2' ? '困难' : '未知难度' }}
              </a-tag>
            </div>
            <!--标签-->
            <div
              slot='tags'
              slot-scope='tags'>
              <a-space>
                <a-button size='small' v-for='tag in tags' :key='tag'>
                  {{ tag }}
                </a-button>
              </a-space>
            </div>
            
            <div
              slot='action'
              slot-scope='text, record'>
              
              <a-button
                style='border-radius: 10px'
                type='primary'
                @click='recoveryTopic(text,record)'>
                恢复题目
              </a-button>
              
              <a-popconfirm
                title='确定要删除吗？删除后将永久丢失，请谨慎操作！'
                ok-text='确认'
                cancel-text='取消'
                @confirm='permanentDeletion(text,record)'
                @cancel='() => {}'
              >
                <a-button
                  style='border-radius: 10px;margin-left: 10px;'>
                  永久删除
                </a-button>
              </a-popconfirm>
            
            </div>
          
          </a-table>
        </a-tab-pane>
      </a-tabs>
      
      <a-modal
        title='请选择可用序号'
        :visible='visible'
        :confirm-loading='confirmLoading'
        @ok='handleOk'
        @cancel='handleCancel'
      >
        <a-space>
          <a-button v-for='order in availableOrder' :disabled='order.disabled' @click='selectOrder(order)'>
            {{ order.order }}
          </a-button>
        </a-space>
      </a-modal>
    
    </a-card>
    
    <a-card v-else>
      <step1 :form-data='formData' mode='update' @updateTopic='updateTopic' />
    </a-card>
  
  </page-header-wrapper>
</template>

<script>
import {
  deletePermanent,
  delMySetTopic,
  getAuthorTopicList,
  getRecycleBin,
  getTopicOrderUseInfo, recycleSubject,
  updateMySetTopic
} from '@/api/adminTopic'
import Step1 from '@/views/topic/Step1.vue'
import { getTopicDetail } from '@/api/newcomerTopic'
import { setTimeout } from 'core-js/internals/schedulers-fix'
import log from '@/views/system/Log.vue'

const columns = [
  {
    title: '序号',
    dataIndex: 'order',
    scopedSlots: { customRender: 'order' }
  },
  {
    title: '题目ID',
    dataIndex: 'topicId',
    width: 220,
    scopedSlots: { customRender: 'topicId' }
  },
  {
    title: '分值',
    dataIndex: 'totalPoints',
    scopedSlots: { customRender: 'totalPoints' }
  },
  {
    title: '题目名称',
    dataIndex: 'title',
    width: 450,
    scopedSlots: { customRender: 'title' }
  },
  {
    title: '难度',
    dataIndex: 'level',
    defaultSortOrder: 'ascend',
    scopedSlots: { customRender: 'level' },
  },
  {
    title: '标签',
    dataIndex: 'tags',
    scopedSlots: { customRender: 'tags' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 250,
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'UpdateTopic',
  components: { Step1 },
  data() {
    return {
      // 表格索引
      tableIndex: 1,
      // 表格数据
      data: [],
      // 回收站数据
      recycleBin: [],
      // 可用的序号
      availableOrder: [],
      // 选中的序号
      selectedOrder: -1,
      // 列数据
      columns,
      loading: false,
      showUpdate: false,
      // 查询参数
      queryParam: {},
      // 分页参数
      pagination: {
        size: 'large',
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '15', '20'],//可选的页面显示条数
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        }, //展示每页第几条至第几条和总数
        hideOnSinglePage: false, // 只有一页时是否隐藏分页器
        showQuickJumper: true, //是否可以快速跳转至某页
        showSizeChanger: true //是否可以改变pageSize
      },
      formData: {},
      visible: false,
      confirmLoading: false,
      recoveryTopicId: -1
    }
  },
  created() {
    this.getAuthorTopicList()
  },
  methods: {
    changeTableIndex(key) {
      this.tableIndex = key
      if (key === 1) {
        this.getAuthorTopicList()
      } else {
        this.getRecycleBinList()
      }
    },
    getTagColor(level) {
      switch (level) {
        case '0':
          return 'green'
        case '1':
          return 'orange'
        case '2':
          return 'red'
        default:
          return 'blue'
      }
    },
    getAuthorTopicList() {
      this.loading = true
      getAuthorTopicList(this.queryParam).then(response => {
        this.data = response.rows
        this.pagination.total = response.total
        this.loading = false
      })
    },
    getRecycleBinList() {
      this.loading = true
      getRecycleBin(this.queryParam).then(response => {
        this.recycleBin = response.rows
        this.pagination.total = response.total
        this.loading = false
      })
    },
    query() {
      if (this.tableIndex === 1) {
        this.getAuthorTopicList()
      } else {
        this.getRecycleBinList()
      }
    },
    //表格改变时触发
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      // 添加分页参数
      this.queryParam.pageNum = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      
      this.query()
    },
    goToUpdateTopic(text, record) {
      // 发送请求获取设置过的题目数据
      getTopicDetail(record.topicId).then(response => {
        this.formData = response.data
        this.showUpdate = true
      })
    },
    updateTopic(values) {
      updateMySetTopic(values).then((res) => {
        if (res.code === 200) {
          this.$message.success('更新成功')
          this.formData = {}
          this.showUpdate = false
          this.getAuthorTopicList()
        }
      })
    },
    delTopic(text, record) {
      delMySetTopic(record.topicId).then(() => {
        this.$message.success('删除成功')
        this.getAuthorTopicList()
      })
    },
    recoveryTopic(text, record) {
      // 弹出序号选择框
      this.visible = true
      // 获取可用的序号
      getTopicOrderUseInfo().then(res => {
        this.availableOrder = res.data
      })
      this.recoveryTopicId = record.topicId
    },
    selectOrder(order) {
      console.log(order)
      if (order.order === -1) {
        this.$message.error('请选择序号')
        return
      }
      if (order.disabled) {
        this.$message.error('序号已被选择')
        return
      }
      this.selectedOrder = order.order
    },
    permanentDeletion(text, record) {
      deletePermanent(record.topicId).then(() => {
        this.$message.success('已永久删除')
        // 刷新数据
        this.getRecycleBinList()
      })
    },
    handleOk(e) {
      if (this.selectedOrder === -1) {
        this.$message.error('请选择序号')
        return
      }
      this.confirmLoading = true
      // 发送请求
      recycleSubject(this.selectedOrder, this.recoveryTopicId).then(() => {
        this.visible = false
        this.getRecycleBinList()
        this.confirmLoading = false
        this.$message.success('恢复成功')
        // 刷新数据
      })
    },
    handleCancel(e) {
      this.visible = false
    },
    copy(copyResult) {
      //创建input标签
      var input = document.createElement('input')
      //将input的值设置为需要复制的内容
      input.value = copyResult
      //添加input标签
      document.body.appendChild(input)
      //选中input标签
      input.select()
      //执行复制
      document.execCommand('copy')
      //成功提示信息
      this.$message.success('复制成功')
      //移除input标签
      document.body.removeChild(input)
    }
  }
}
</script>

<style scoped>

</style>